<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-27 17:56:46
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-05-11 20:36:34
 * @FilePath: /meeting-minutes-h5/src/components/ConferenceMinutes/EditParticipantInfo/CustomerFormView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex flex-col justify-between h-full px-2 pb-4">
    <div class="flex flex-row justify-between items-center px-2 h-[50px]">
      <div></div>
      <h2 class="font-bold text-[16px]">{{ title }}</h2>
      <div></div>
    </div>
    <div class="flex flex-col flex-auto">
      <div class="mb-4" v-for="field in combinedFields" :key="field.id">
        <div class="flex flex-col items-start" v-if="field.fieldType === 'String'">
          <!-- <div>{{ field.fieldName }}</div> -->
          <van-field
            v-model="customerInfo[field.fieldName]"
            :placeholder="field.placeholder || '请输入'"
            :required="field.isRequired === 1"
            :maxlength="field.maxLength"
            :label="field.fieldName"
            :minlength="field.minLength"
            clearable
          />
        </div>
        <div v-else-if="field.fieldType === 'Select'">
          <!-- <div>{{ field.fieldName }}</div> -->
          <van-field
            v-model="customerInfo[field.fieldName]"
            :label="field.fieldName"
            :placeholder="field.placeholder"
            :required="field.isRequired === 1"
            is-link
            readonly
            @click="showSelect(field)"
          />
        </div>
      </div>
    </div>

    <!--  -->
    <van-button
      round
      block
      :disabled="!allRequiredFieldsFilled"
      @click="onClickConfirmCustomer"
      type="primary"
      class="button mt-6"
      >确定
    </van-button>

    <van-action-sheet
      v-model:show="show"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
      close-on-click-action
    />
  </div>
</template>

<script>
import { mapActions, mapState } from "pinia";
import { useMinutesStore } from "@/store";

export default {
  emits: ["confirm"],
  props: {
    ui: {
      type: String,
      default: () => "",
    },
    title: {
      type: String,
      default: "添加客户参会人",
    },
    isEditModel: {
      type: Boolean,
      default: false,
    },
    defaultInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      customerInfo: {},
      actions: [],
      show: false,
      currentField: {},
      searchValue: "",
      nameField: {
        id: "name",
        fieldName: "姓名",
        fieldType: "String",
        placeholder: "请输入姓名",
        isRequired: 1,
        maxLength: 15,
        minLength: 1,
      },
    };
  },

  mounted() {
    this.getData();
  },

  methods: {
    ...mapActions(useMinutesStore, {
      getOuterFiledPartnerAction: "getOuterFiledPartnerAction",
    }),

    async getData() {
      if (this.outerFiledTemple?.length === 0) {
        await this.getOuterFiledPartnerAction();
      }
      if (this.isEditModel && this.defaultInfo) {
        this.setDefaultData();
      }
    },

    // 将编辑的信息填入form
    setDefaultData() {
      this.customerInfo[this.nameField.fieldName] = this.defaultInfo.name || "";

      if (!this.defaultInfo.formData) {
        return;
      }

      const { fieldValues } = this.defaultInfo.formData;
      for (const fieldInfo of fieldValues) {
        const { fieldName, fieldValue } = fieldInfo;
        this.customerInfo[fieldName] = fieldValue || "";
      }
    },

    showSelect(field) {
      this.currentField = field;
      const options = JSON.parse(field.fieldOptions);
      this.actions = options.map((field) => {
        return {
          name: field,
        };
      });
      this.show = true;
    },

    onSelect(action) {
      this.customerInfo[this.currentField.fieldName] = action.name;
      console.log(action);
    },

    onClickConfirmCustomer() {
      const parameter = {};
      const fieldValues = [];
      this.outerFiledTemple.forEach((field) => {
        fieldValues.push({
          id: field.id,
          fieldId: field.id,
          fieldName: field.fieldName,
          fieldValue: this.customerInfo[field.fieldName],
        });
      });
      parameter.name = this.customerInfo.姓名;
      parameter.ui = this.ui;
      parameter.fieldValues = fieldValues;
      this.$emit("confirm", parameter);
    },
  },

  computed: {
    ...mapState(useMinutesStore, {
      outerFiledTemple: "outerFiledPartner",
    }),
    allRequiredFieldsFilled() {
      return this.combinedFields.every((field) => {
        return field.isRequired !== 1 || this.customerInfo[field.fieldName];
      });
    },
    combinedFields() {
      const nameField = this.nameField;
      let array = this.outerFiledTemple.filter((field) => {
        return field.fieldStatus !== 0;
      });
      return [nameField, ...array];
    },
  },
};
</script>

<style lang="less" scoped></style>
